<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span>线上热门搜索</span>
      <el-dropdown>
        <span class="el-dropdown-link iconfont icon-sandian"></span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>小米</el-dropdown-item>
          <el-dropdown-item>华为</el-dropdown-item>
          <el-dropdown-item>苹果</el-dropdown-item>
          <el-dropdown-item>红米</el-dropdown-item>
          <!-- divided 显示分割线 -->
          <el-dropdown-item divided>VIVO</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="text item">
      <!-- 搜索用户数 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="header">
            <span>搜索用户数</span>
            <span class="iconfont icon-xinxi2"></span>
          </div>
          <div class="content">
            <div class="data">
              12321 <span>17.1<i class="iconfont icon-shangsheng"></i></span>
            </div>
            <LineCharts
              :smooth="true"
              :dataList="[100, 20, 30, 120, 10, 50]"
            ></LineCharts>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="header">
            <span>人均搜索次数</span>
            <span class="iconfont icon-xinxi2"></span>
          </div>
          <div class="content">
            <div class="data">
              2.7<span
                >26.2<i class="iconfont icon-xiajiang-copy xiajiang"></i
              ></span>
            </div>
            <LineCharts
              :smooth="true"
              :dataList="[10, 40, 20, 30, 60, 50, 20]"
            ></LineCharts>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-table border style="width: 100%" :data="tableData">
      <el-table-column
        type="index"
        label="排名"
        width="80"
        align="center"
      ></el-table-column>
      <el-table-column prop="word" label="搜索关键字"> </el-table-column>
      <el-table-column prop="user" label="用户数" sortable> </el-table-column>
      <el-table-column prop="count" label="周涨幅" sortable> </el-table-column>
    </el-table>
    <el-pagination
      layout="prev, pager, next"
      :total="searchWord.length"
      align="right"
      :current-page="1"
      :page-size="1"
    >
    </el-pagination>
  </el-card>
</template>

<script>
import cloneDeep from 'lodash/cloneDeep'
import { mapGetters } from "vuex";
// 引入折线图插件
import LineCharts from "../LineCharts";
export default {
  name: "Search",
  components: {
    LineCharts,
  },
  data() {
    return {
      tableData: [{
        word: '小米',
        user: 3000,
        count: 10000
      }]
    };
  },
  computed: {
    ...mapGetters("home", ["searchWord"]),
  },
  watch: {
    searchWord() {
      this.tableData[0] = this.searchWord[0];
    },
  }
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
/* >>> 深度选择器 */
>>> .clearfix .el-dropdown {
  float: right;
  font-weight: 700;
}
.clearfix:after {
  clear: both;
}
.header {
  color: #666;
  display: block;
}
.header span {
  margin-right: 10px;
}
.content .data {
  font-size: 26px;
  margin-top: 20px;
}
.content .data span {
  margin-left: 20px;
  font-size: 14px;
  color: #666;
}
>>> .el-card__body {
  padding-bottom: 0;
}
</style>